<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* width: 400px;
            height: 400px;

            /* background-image: radial-gradient(circle,red,skyblue); */
            /* background-image: radial-gradient(100px 100px,red,skyblue); */

            /* 中心点 */
            /* background-image: radial-gradient(100px 100px at 0 0,red,skyblue); */
            /* background-image: radial-gradient(farthest-side at center center,red,skyblue); */
            float: left;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background-color: tomato;
            background-image: radial-gradient(black 0%, black 7%,
                    blue 7%, blue 14%,
                    yellow 14%, yellow 21%,
                    green 21%, green 28%,
                    red 28%, red 35%,
                    orange 35%, orange 42%,
                    blue 42%, blue 49%,
                    yellow 49%, yellow 56%,
                    red 56%, red 63%,
                    black 63%, black 70%);
        }

        .yuan {
            float: left;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            margin: 0 100px;
            background-image: radial-gradient(black 14%, black 7%, blue 27%, blue 14%, yellow 39%, yellow 21%, green 47%, green 28%, red 59%, red 35%, orange 65%, orange 42%, blue 42%, blue 49%, yellow 49%, yellow 56%, red 68%, red 63%, black 73%, black 70%);
        }
    </style>
</head>

<body>
    <div></div>
    <div class="yuan">

    </div>
</body>

</html>